<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/before/css/common.css" rel="stylesheet" tyle="text/css" />
    <link href="/before/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/before/fonts/iconfont.css" rel="stylesheet" type="text/css" />
    <script src="/before/js/jquery.min.1.8.2.js" type="text/javascript"></script>
    <script src="/before/js/lrtk.js" type="text/javascript"></script>
    <script src="/before/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/before/js/common_js.js" type="text/javascript"></script>
    <script src="/before/js/footer.js" type="text/javascript"></script>
    <script src="/before/js/jquery.jumpto.js" type="text/javascript"></script>
    <!--引用vue的js-->
    <script src="/after/js/vue/vue.min.js"></script>
    <!--分页插件-->
    <script src="/after/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/after/js/layer/layer.js" charset="utf-8"></script>

    <!--bootstrap面包屑-->
    <link href="/before/bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">

    <title>图书前台分页页面</title>
</head>
<script type="text/javascript" charset="UTF-8">
    //点击效果start
    function infonav_more_down(index) {
        var inHeight = ($("div[class='p_f_name infonav_hidden']").eq(index).find('p').length)*30;
        //先设置了P的高度，然后计算所有P的高度
        if(inHeight > 60){
            $("div[class='p_f_name infonav_hidden']").eq(index).animate({height:inHeight});
            $(".infonav_more").eq(index).replaceWith('<p class="infonav_more"><a class="more"  onclick="infonav_more_up('+index+');return false;" href="javascript:">收起<em class="pulldown"></em></a></p>');
        }else{
            return false;
        }
    }
    function infonav_more_up(index) {
        var infonav_height = 85;
        $("div[class='p_f_name infonav_hidden']").eq(index).animate({height:infonav_height});
        $(".infonav_more").eq(index).replaceWith('<p class="infonav_more"> <a class="more" onclick="infonav_more_down('+index+');return false;" href="javascript:">更多<em class="pullup"></em></a></p>');
    }
    function onclick(event) {
        info_more_down();
        return false;
    }
</script>
<body>
<!--头-->
<div id="page2"></div>

<!--产品条件筛选样式-->
<div class="Inside_pages clearfix" >
    <!--位置-->
    <div id="Filter_style">
        <div class="Location_link">
            <!--面包屑-->

            <div class="row">
                <div class="span6">
                    <ul class="breadcrumb">
                        <li>
                            <a href="/stage/index.ftl">全部</a> <span class="divider">></span>
                        </li>

                        <li class="active">大类型</li>
                    </ul>
                </div>
            </div>

            <!--<em></em><a href="#">********</a>  &lt;   <a href="#">*****面包屑****</a>-->
        </div>
        <!--筛选样式***********************************************************************************************************************-->
        <div class="Filter">
            <div class="Filter_list clearfix" id="zz">
                <div class="Filter_title">
                    <span>作者：</span>
                </div>
                <div class="Filter_Entire">
                    <a href="javascript:void(0)" onclick="qingchuA();">全部</a>
                </div>
                <div class="p_f_name">
                    <a href="javascript:void(0)" class="yanseA" v-for="(item,index) in res" onclick="a(this);">{{item.author}}</a>
                </div>
            </div>
            <div class="Filter_list clearfix" id="cbs">
                <div class="Filter_title">
                    <span>出版社：</span>
                </div>
                <div class="Filter_Entire">
                    <a href="javascript:void(0)" onclick="qingchuB();">全部</a>
                </div>
                <div class="p_f_name" >
                    <a href="javascript:void(0)" class="yanseB" v-for="(item,index) in result" onclick="b(this);">{{item.publish}}</a>
                </div>
            </div>
            <div class="Filter_list clearfix">
                <div class="Filter_title">
                    <span>价格：</span>
                </div>
                <div class="Filter_Entire">
                    <a href="javascript:void(0)" onclick="qingchuC();">全部</a>
                </div>
                <div class="p_f_name">
                    <a href="javascript:void(0)" onclick="c(this);" class="yanseC">50</a>
                    <a href="javascript:void(0)" onclick="c(this);" class="yanseC">150</a>
                    <a href="javascript:void(0)" onclick="c(this);" class="yanseC">500</a>
                    <a href="javascript:void(0)" onclick="c(this);" class="yanseC">1000</a>
                    <a href="javascript:void(0)" onclick="c(this);" class="yanseC">2000</a>
                </div>
            </div>
        </div>
    </div>
    <div  class="scrollsidebar side_green" id="scrollsidebar">
        <div class="show_btn" id="rightArrow">
            <span></span>
        </div>
        <div class="page_left_style side_content"  >
            <!--浏览记录*********************************************************************************************************************-->
            <div class="side_title">
                <a title="隐藏" class="close_btn">
                    <span></span>
                </a>
            </div>

            <div class="Record side_list" id="rm">
                <div class="title_name">热门浏览记录</div>
                <ul>
                    <li v-for="(item,index) in remen">
                        <a href="javascript:void(0)">
                            <p>
                                <img src="/before/Products/P-1.jpg">
                            </p>
                            <p class="p_name">{{item.name}}</p>
                        </a>
                        <p>
                            <span class="p_Price left">价格:<b>￥{{item.price}}</b></span>
                            <span class="p_Sales right">点击量：{{item.click}}次</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <script type="text/javascript">
            $(function() {
                $("#scrollsidebar").fix({
                    float : 'left',
                    //minStatue : true,
                    skin : 'green',
                    durationTime : 600
                });
            });
        </script>
        <div class="page_right_style">
            <!--排序样式-->
            <div id="Sorted">
                <div class="Sorted">
                    <div class="Sorted_style">
                        <a href="javascript:void(0)" onclick="xiaochu();" class="yanse">综合<i class="iconfont icon-pullup"></i></a>
                        <a href="javascript:void(0)" onclick="huoquXL(this);" class="yanse">销量<i class="iconfont icon-pullup"></i></a>
                        <a href="javascript:void(0)" onclick="huoquJG(this);" class="yanse">价格<i class="iconfont icon-pullup"></i></a>
                        <a href="javascript:void(0)" onclick="huoquXP(this)" class="yanse">新品<i class="iconfont icon-pullup"></i></a>
                    </div>
                    <div class="s_Paging">
                        <span>图书</span>
                    </div>
                </div>
            </div>
            <!--结束-->
            <!--产品列表样式***********************************************************************************************-->
            <div class="p_list  clearfix" id="bok">
                <ul>
                    <li class="gl-item"  v-for="(item,index) in re">
                        <div class="Borders">
                            <div class="img">
                                <a href="#">
                                    <img src="/before/Products/P-1.jpg" style="width:220px;height:220px"/>
                                </a>
                            </div>
                            <div class="Price">
                                <b>{{item.price}}</b>
                                <span>[修饰语]</span>
                            </div>
                            <div class="name">
                                <a href="#">{{item.content}}</a>
                            </div>
                            <div class="Review">还剩
                                <span>{{item.stock}}件</span>
                                <a href="javascript:void(0)">{{item.publish}}</a>出版
                            </div>
                            <div class="p-operate">
                                <a href="#" class="p-o-btn shop_cart" @click="gouWuEvent(item.id)">
                                    <em></em>加入购物车
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--分页*************************************************************************-->
            <div class="Paging" id="pagenav"></div>
        </div>
    </div>
</div>

</div>
<!--底部样式***********************************************************************************************************************************-->
<!--尾-->
<div id="page3"></div>

<div id="page1"></div>
<script>
    $("#page2").load("/czgIndexTop/getBtype.do");
    $("#page3").load("/stage/Czg_index_foot.ftl");
    $("#page1").load("/stage/LQ_right.ftl");
</script>

</body>
<script>
    //定义(根据作者出版价格求的)全局变量
    var ne = "";
    var cb = "";
    var jg = 0.0;
    //定义(销量价格新品排序的)全局变量
    var sales = "";
    var rate = "";
    var product = "";
    <!--作者的ajax-->
    var zz=new Vue({
        el:'#zz',
        data:{
            res:[]
        }
    });
    var getauthorList = function () {
        $.ajax({
            url:'/pc/chaauthor.do',
            data:'post',
            dataType:'json',
            error:function () {
                alert("错误");
            },
            success:function (msg) {
                zz.res = msg.list;
            }
        });
    }
    getauthorList();
    <!--作者取值方法-->
    function a(name){
        //取值
        ne=$(name).text();
        getBookList();
        //清除颜色
        $(".yanseA").css("color","black");
        //改变颜色
        $(name).css("color","red");

    }
    function qingchuA(){
        //清除颜色
        $(".yanseA").css("color","black");

        ne = "";
        getBookList();
    }
    <!--出版社的ajax-->
    var cbs = new Vue({
        el : '#cbs',
        data : {
            result : []
        }
    });
    var getpublishList = function () {
        $.ajax({
            url:'/pc/chaPublish.do',
            type:'post',
            dataType:'json',
            error:function () {
                alert("错误");
            },
            success:function (msg) {
                cbs.result = msg.list;
            }
        });
    }
    getpublishList();
    <!--出版取值方法-->
    function b(chuban){
        cb=$(chuban).text();
        getBookList();
        //清除颜色
        $(".yanseB").css("color","black");
        //改变颜色
        $(chuban).css("color","red");
    }
    function qingchuB(){
        //清除颜色
        $(".yanseB").css("color","black");
        cb = "";
        getBookList();
    }
    <!--价格取值方法-->
    function c(jiage){
        var je=$(jiage).text();
        jg=parseFloat(je);
        getBookList();
        //清除颜色
        $(".yanseC").css("color","black");
        //改变颜色
        $(jiage).css("color","red");
    }
    function qingchuC(){
        //清除颜色
        $(".yanseC").css("color","black");
        jg = 0.0;
        getBookList();
    }
    <!--查询书籍(根据价格，书名，作者，出版社，类型)ajax*******************************************************-->
    var bok = new Vue({
        el : '#bok',
        data : {
            re : []
        }
    })
    var getBookList = function (curr) {
        $.ajax({
            url:'/pc/getByPage.do',
            type:'post',
            dataType:'json',
            data:{
                pageNum:curr || 1,
                pageSize:7,
                author:ne,
                publish:cb,
                price:jg,

                sales:sales,
                rate:rate,
                product:product
            },
            error:function () {
                alert("错误");
            },
            success:function (msg) {
                bok.re = msg.list;
                laypage({
                    cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                    pages : msg.totalPage, //总页数
                    first : '首页',
                    last : '尾页',
                    curr : curr || 1, //当前页
                    jump : function(obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            getBookList(obj.curr);
                        }
                    }
                });
            }
        });
    }
    getBookList();
    <!--获取销量价格新品字符串*****************************************************************-->
    function huoquXL(hqxl) {
        var xiaoliang=$(hqxl).text();
        sales=xiaoliang;
        product = "";
        rate = "";
        getBookList();
        //清除颜色
        $(".yanse").css("color","black");
        //改变颜色
        $(hqxl).css("color","red");
    }
    function huoquJG(hqjg){
        var huo=$(hqjg).text();
        rate=huo;
        sales = "";
        product = "";
        getBookList();
        //清除颜色
        $(".yanse").css("color","black");
        //改变颜色
        $(hqjg).css("color","red");
    }
    function huoquXP(hqxp){
        var xinping=$(hqxp).text();
        product=xinping;
        sales = "";
        rate = "";
        getBookList();
        //清除颜色
        $(".yanse").css("color","black");
        //改变颜色
        $(hqxp).css("color","red");
    }
    function xiaochu(){
        sales = "";
        rate = "";
        product = "";
        getBookList();
        //清除颜色
        $(".yanse").css("color","black");
    }
    <!--热门的ajax(根据点击量排序)-->
    var rm=new Vue({
        el:'#rm',
        data:{
            remen:[]
        }
    });
    var getClickList = function () {
        $.ajax({
            url:'/pc/chaClick.do',
            data:'post',
            dataType:'json',
            error:function () {
                alert("错误");
            },
            success:function (msg) {
                rm.remen = msg.list;
            }
        });
    }
    getClickList();
    <!--购物车-->
    function gouWuEvent(obj){
        var name="张三";
        if(name==""){
            alert("您尚未登录，请登录");
        }else{
            $.ajax({
                url:"/pc/insertShop.do",
                type:'post',
                dataType:'json',
                data:{
                    id:obj,
                    name:name
                },
                error:function () {
                    alert("错误");
                },
                success:function (msg) {
                    if(msg.flag==true){
                        alert("已添加购物车");
                    }else{
                        alert("添加购物车失败!");
                    }
                    getBookList();
                }
            });
        }
    }
</script>
</html>